<template>
  <div class="page-container">
    <DynamicForm :config="dyConfig" :questions="dyQuestions" />
    <DynamicTable :tables="dyTable" :config="dyTableConfig" :icons="dyIcons" ref="tableRef">
      <template #code="{ record }">
        <span @click="viewWatermark(record)" class="cursor-pointer text-blue-700">{{ record.code }}</span>
      </template>
    </DynamicTable>
  </div>
  <AddDialog v-model:visible="state.addShow" v-if="state.addShow" :show-type="state.showType" :data="state.showData" @handleEdit="handleEdit" />
</template>

<script lang="ts" setup>
import { reactive, getCurrentInstance, onBeforeUnmount, ref, nextTick } from 'vue';
import { DynamicForm, DynamicTable } from '@/components/public-template';
import { DYNAMICLOCALICONS, DYNAMICLTABLEDELETE } from '@/mixins/subject/subject-types';
import { Api } from '@/config/api/watermark';
import indexService from './index.service';
import AddDialog from './components/addDialog.vue';

const state = reactive({
  addShow: false,
  showType: 'ADD',
  showData: null
});
const dyConfig: any = {
  style: 'table-form',
  name: 'watermarkTable',
  labelCol: 8,
  wrapperCol: 16,
  grid: 8,
  cancelSave: true
};
const dyTableConfig: any = {
  name: 'watermarkTable',
  queryUrl: Api.watermarkPage,
  protType: 'post',
  isScreen: true,
  rowSelection: {
    type: 'checkbox'
  }
};
const tableRef = ref(null);
const dyQuestions: any = reactive(indexService.getQuestions());
const dyTable: any = reactive(indexService.getTables());
const dyIcons: any = reactive(indexService.getIcons());
//监听table
const { proxy }: any = getCurrentInstance();
const subscribeSub = proxy.$NotificationPubSub.getParams().subscribe((item: any) => {
  console.log('item', item);
  if (item.key === DYNAMICLOCALICONS) {
    state.addShow = true;
    state.showType = 'ADD';
    state.showData = null;
  }
  if (item.key === DYNAMICLTABLEDELETE) {
    tableRef.value.selectedRows = [];
  }
});
// 查看水印
function viewWatermark(record) {
  state.addShow = true;
  state.showType = 'VIEW';
  state.showData = record;
}
// 编辑水印
function handleEdit(data) {
  console.log('data', data);
  state.addShow = false;
  nextTick(() => {
    state.showType = 'EDIT';
    state.addShow = true;
    state.showData = data;
  });
}

onBeforeUnmount(() => {
  subscribeSub && subscribeSub.unsubscribe();
  proxy.$NotificationPubSub.clearParams();
});
</script>

<style lang="less" scoped></style>
